<template>
  <div class="center">
    <!-- 表单 -->
    <Table/>
    <router-view></router-view>
    
    <!-- 列表 -->
    <el-tabs v-model="activeName" type="border-card" class="card">
      <el-tab-pane label="综合" name="first">
        <div v-for="item in list" :key="item.index" class="item">
          <div class="content">
            <div>
              <img :src="item.pic" alt="" />
              <img :src="item.imgs" alt="" />
              <div>{{ item.inner }}</div>
            </div>

            <div>
              <span> &nbsp;{{ item.text }} </span>
              <span>￥{{ item.price }}</span>
              <span>￥{{ item.oriPrice }}</span>
              <span>{{ item.reducePrice }}</span>
            </div>
            <div class="van-multi-ellipsis--l2">{{ item.alt }}</div>
            <div>{{ item.quan }}</div>
            <div>{{ item.news }}</div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="销量" name="second">
        <div v-for="el in sale" :key="el.index" class="item">
          <div class="content">
            <div>
              <img :src="el.pic" alt="" />
              <img :src="el.imgs" alt="" />
              <div>{{ el.inner }}</div>
            </div>

            <div>
              <span> &nbsp;{{ el.text }} </span>
              <span>￥{{ el.price }}</span>
              <span>￥{{ el.oriPrice }}</span>
              <span>{{ el.reducePrice }}</span>
            </div>
            <div class="van-multi-ellipsis--l2">{{ el.alt }}</div>
            <div>{{ el.quan }}</div>
            <div>{{ el.news }}</div>
            <div>{{ el.exclusive }}</div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="价格" name="third">
        <div v-for="el in pri" :key="el.index" class="item">
          <div class="content">
            <div>
              <img :src="el.pic" alt="" />
              <img :src="el.imgs" alt="" />
              <div>{{ el.inner }}</div>
            </div>

            <div>
              <span> &nbsp;{{ el.text }} </span>
              <span>￥{{ el.price }}</span>
              <span>￥{{ el.oriPrice }}</span>
              <span>{{ el.reducePrice }}</span>
            </div>
            <div class="van-multi-ellipsis--l2">{{ el.alt }}</div>
            <div>{{ el.quan }}</div>
            <div>{{ el.news }}</div>
            <div>{{ el.exclusive }}</div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="折扣" name="fourth">
         <div v-for="el in dis" :key="el.index" class="item" >
          <div class="content">
            <div>
              <img :src="el.pic" alt="" />
              <img :src="el.imgs" alt="" />
              <div>{{ el.inner }}</div>
            </div>

            <div>
              <span> &nbsp;{{ el.text }} </span>
              <span>￥{{ el.price }}</span>
              <span>￥{{ el.oriPrice }}</span>
              <span>{{ el.reducePrice }}</span>
            </div>
            <div class="van-multi-ellipsis--l2">{{ el.alt }}</div>
            <div>{{ el.quan }}</div>
            <div>{{ el.news }}</div>
            <div>{{ el.exclusive }}</div>
          </div>
        </div>
      </el-tab-pane>
      <el-pagination background layout="prev, pager, next" :total="100">
      </el-pagination>
    </el-tabs>
  </div>
</template>

<script>
import url from "@/config/url";
import Table from "@/components/Table.vue";
export default {
    data() {
        return {
            list: [],
            sale: [],
            pri: [],
            dis: [],
            activeName: "first",
        };
    },
    created() {
        // console.log(url.projectList);
        this.$http.get(url.projectList).then((res) => {
            // console.log(res);
            this.list = res;
        });
        this.$http.get(url.saleList).then((res) => {
            // console.log(res);
            this.sale = res;
        });
        this.$http.get(url.priList).then((res) => {
            // console.log(res);
            this.pri = res;
        });
        this.$http.get(url.disList).then((res) => {
            // console.log(res);
            this.dis = res;
        });
    },
    components: { Table }
};
</script>

<style lang="scss" scoped>
.center {
  width: 1200px;
  margin: 0 auto;
  .card{
    .item {
    width: 218px;
    border: solid 1px #e7e7e7;
    overflow: visible;
    cursor: pointer;
    margin-bottom: 20px;
    margin-right: 15px;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    position: relative;
    .content {
      > div:nth-child(1) {
        position: relative;
        height: 235px;
        > img:nth-child(1) {
          width: 100%;
          height: 100%;
        }
        > img:nth-child(2) {
          position: absolute;
          top: 10px;
          left: 10px;
          width: 60px;
          height: 30px;
        }
        div {
          position: absolute;
          bottom: 10px;
          left: 80px;
          color: #fff;
          background: #222;
          font-size: 12px;
          width: 65px;

          text-align: center;
          border-radius: 10px;
        }
      }
      > div:nth-child(2) {
        margin: 10px;
        color: #999;
        font-size: 14px;
        :nth-child(1) {
          background: #ff38c0;
          font-size: 12px;

          border-radius: 10px;
          color: #fff;
        }
        :nth-child(2) {
          font-size: 20px;
          color: #333;
          font-weight: 700;
        }
        :nth-child(3) {
          padding-right: 5px;
          padding-left: 2px;
          text-decoration: line-through;
        }
      }
      > div:nth-child(3) {
        color: #666;
        font-size: 12px;
        margin: 0 12px;
      }
      > div:nth-child(4) {
        background-color: rgba(240, 56, 103, 0.2);
        font-size: 12px;
        color: #ff38c0;
        width: 44px;
        margin: 15px;
        text-align: center;
        border-radius: 4px;
      }
      > div:nth-child(5) {
        background-color: rgba(50, 180, 68, 0.2);
        font-size: 12px;
        color: #32b444;
        width: 60px;
        margin: 15px;
        text-align: center;
        border-radius: 4px;
      }
      > div:nth-child(6) {
        background-color: rgba(240, 56, 103, 0.2);
        font-size: 12px;
        color: #ff38c0;
        width: 55px;
        margin: 15px;
        text-align: center;
        border-radius: 4px;
      }
    }
  }
  .el-pagination {
    text-align: center;
  }
  }
}
</style>